<template>
  <div class="intr_page">
    <img src="@/assets/img/bg_1@2x.png" alt="" class="bgimg"/>
    <div class="doctor_info">
      <div class="">
        <img :src="info.avatarUrl?info.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01" alt=""
             v-if="info.sex == '1'"/>
        <img :src="info.avatarUrl?info.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02" alt=""
             v-else/>
        <div style="font-size: 1rem;line-height:1.5rem;font-weight:bold">{{ info.name }}<span style="color:red"
                                                                                              v-if="isOnline=='1'">(在线问诊)</span>
        </div>
        <div style="font-weight:500">{{ info.jobTitle }}</div>
        <div style="color: #a4adbe">{{ info.deptName }}</div>
      </div>
    </div>
    <div class="intr_info">
      <!-- <div class="title">
                <img src="@/assets/icon_areas of expertise@2x.png" alt=""><span>擅长领域</span>
            </div>
            <div class="msg">
                {{info.goodAt}}
            </div> -->
      <div class="title">
        <img src="@/assets/img/icon_resume.png" alt=""/><span>个人简介</span>
      </div>
      <div class="msg">
        {{ info.desc }}
      </div>
    </div>
    <div class="gap"></div>
    <div class="appo_date">
      <div class="item" v-for="(item, index) in dateList"
           :class="{  noclick: item.hasReg == 0,active: idx == item.regDate }"
           @click="selectFun(item) " v-if="index >= 0 && index < 60">
        <div>{{ item.regDate | substring }}</div>
        <div>周{{ item.weekDay | NoToChinese }}</div>
      </div>
    </div>
    <template v-for="(value, ind) in timeList">
      <div class="time_head">
        <div class="time_head_1">{{ value.time }}</div>
        <div class="time_head_2">¥{{ value.treatFee }}</div>
      </div>
      <div class="time_box">
        <!-- 1 上午 -->
        <template v-for="(item, index) in value.children">
          <template v-if="item.timeFlag == 1">
            <div class="time_box_item" :class="{ time_active: regId == item.regId }"
                 :style="{'background':item.overCount===0?'Gainsboro':'#fff','color':item.overCount===0?'gray':''}"
                 @click="item.overCount != 0 ? selectTimeFun(item) : ''">
              <div class="fee" v-if="item.sctime">{{ item.sctime }}</div>
              <div class="fee" v-else>余号 {{ item.overCount }}</div>
            </div>
          </template>
          <!-- 4 中午 -->
          <template v-if="item.timeFlag == 4">
            <div class="time_box_item" :class="{ time_active: regId == item.regId }"
                 :style="{'background':item.overCount===0?'Gainsboro':'#fff','color':item.overCount===0?'gray':''}"
                 @click="item.overCount != 0 ? selectTimeFun(item) : ''">
              <div class="fee" v-if="item.sctime">{{ item.sctime }}</div>
              <div class="fee" v-else>余号 {{ item.overCount }}</div>
            </div>
          </template>

          <!-- 2 下午 -->
          <template v-if="item.timeFlag == 2">
            <div class="time_box_item" :class="{ time_active: regId == item.regId }"
                 :style="{'background':item.overCount===0?'Gainsboro':'#fff','color':item.overCount===0?'gray':''}"
                 @click="item.overCount != 0 ? selectTimeFun(item) : ''">
              <div class="fee" v-if="item.sctime">{{ item.sctime }}</div>
              <div class="fee" v-else>余号 {{ item.overCount }}</div>
            </div>
          </template>
          <!-- 3 晚上 -->
          <template v-if="item.timeFlag == 3">
            <div class="time_box_item" :class="{ time_active: regId == item.regId }"
                 :style="{'background':item.overCount===0?'Gainsboro':'#fff','color':item.overCount===0?'gray':''}"
                 @click="item.overCount != 0 ? selectTimeFun(item) : ''">
              <div class="fee" v-if="item.sctime">{{ item.sctime }}</div>
              <div class="fee" v-else>余号 {{ item.overCount }}</div>
            </div>
          </template>
        </template>
      </div>
    </template>
    <popup v-model="showFamous" height="100vh" :hide-on-blur="false" is-transparent>
      <div class="mask_confirm" style="">
        <div class="tit">温馨提醒</div>
        <div class="content">
          著名专家门诊号源集中在总院区（南京北街117号）9楼看诊，请您提前知晓以免走错。
        </div>
        <div class="btn" @click="showFamous = !showFamous">我已知晓</div>
      </div>
    </popup>
  </div>
</template>
<script>
import {getDoctorRegInfoByDate, getRegDateList, getDoctorInfo} from "@/api/api";
import {Popup} from "vux";

export default {
  components: {
    Popup,
  },
  data() {
    return {
      showFamous: false,
      isCollect: false,
      amTotal: null,
      pmTotal: null,
      info: {},
      isOnline: 0,
      isNight: "",
      isToday: "",
      idx: null,
      regId: null,
      dateList: [],
      timeList: [],
      errorImg01: 'this.src="' + require("@/assets/img/img_male.png") + '"',
      errorImg02: 'this.src="' + require("@/assets/img/icon_female.png") + '"',
    };
  },
  created() {
    console.log('query', this.$route.query);
    this.info = this.$route.query;
    this.isOnline = this.info.isOnline;
    this.isNight = this.info.isNight;
    this.getDoctorInfo(this.info.deptId, this.info.doctorId);
    if (this.info.deptId == '0045') {
      this.showFamous = true;
    }
    this.getRegDateList();
    setTimeout(() => {
      if (window.localStorage.getItem("appoIdx")) {
        this.idx = window.localStorage.getItem("appoIdx");
        if (window.localStorage.getItem("appoRegId")) {
          this.regId = window.localStorage.getItem("appoRegId");
        }
      } else {
        // this.idx = this.dateList[0].regDate;
      }
      this.getDoctorRegInfoByDate(this.idx);
    }, 500);
  },
  methods: {
    // 获取排班日期
    getRegDateList() {
      var data = {
        hosId: "",
        deptId: this.info.deptId,
        doctorId: this.info.doctorId,
        isNight: this.isNight,
        isOnline: this.isOnline
      };
      getRegDateList(data).then((res) => {
        if (res.code == 200) {
          this.dateList = res.data;
          var find = res.data.find((item) => item.hasReg > 0);
          if (find) {
            this.idx = find.regDate
          } else {
            this.idx = this.dateList[0].regDate;
          }
          // console.log(find);
        }
      });
    },
    getDoctorInfo(deptId, doctorId) {
      var data = {
        hosId: "",
        deptId: deptId,
        doctorId: doctorId
      };
      getDoctorInfo(data).then((res) => {
        if (res.code == 200) {
          this.info = res.data[0];
        }
      });
    },
    // 获取排班信息
    getDoctorRegInfoByDate(regDate) {
      console.log("getDoctorRegInfoByDate:", this.isNight)
      var data = {
        hosId: "",
        deptId: this.info.deptId,
        doctorId: this.info.doctorId,
        startDate: regDate,
        endDate: regDate,
        isNight: this.isNight,
        isOnline: this.isOnline
      };
      getDoctorRegInfoByDate(data).then((res) => {
        if (res.code == 200) {
          var list = [], resData = res.data;
          let amList = resData.filter((element) => {
            return element.timeFlag.toString().indexOf(1) == 0;
          });
          let wbList = resData.filter((element) => {
            return element.timeFlag.toString().indexOf(4) == 0;
          });
          let pmList = resData.filter((element) => {
            return element.timeFlag.toString().indexOf(2) == 0;
          });
          let wsList = resData.filter((element) => {
            return element.timeFlag.toString().indexOf(3) == 0;
          });

          for (let index = 0; index < resData.length; index++) {
            if (resData[index].timeFlag.toString().indexOf(1) == 0) {
              list.push({
                time: "上午",
                treatFee: resData[index].treatFee / 100,
                children: amList
              })
              break
            }
          }
          for (let index = 0; index < resData.length; index++) {
            if (resData[index].timeFlag.toString().indexOf(4) == 0) {
              list.push({
                time: "中午",
                treatFee: resData[index].treatFee / 100,
                children: wbList
              })
              break
            }
          }
          for (let index = 0; index < resData.length; index++) {
            if (resData[index].timeFlag.toString().indexOf(2) == 0) {
              list.push({
                time: "下午",
                treatFee: resData[index].treatFee / 100,
                children: pmList
              })
              break
            }
          }
          for (let index = 0; index < resData.length; index++) {
            if (resData[index].timeFlag.toString().indexOf(3) == 0) {
              list.push({
                time: "晚上",
                treatFee: resData[index].treatFee / 100,
                children: wsList
              })
              break
            }
          }

          this.timeList = list
        } else {
          this.timeList = [];
        }
      });
    },
    selectFun(item) {
      this.idx = item.regDate;
      window.localStorage.setItem("appoIdx", this.idx);
      this.getDoctorRegInfoByDate(item.regDate);
    },
    selectTimeFun(item) {
      this.regId = item.regId;
      item.doctorName = this.info.name;
      item.isOnline = this.isOnline;
      window.localStorage.setItem("appoRegId", this.regId);
      this.$router.push({path: "/confirm_appointment", query: item});
    },

    back() {
      this.$router.go(-1);
    },
  },
  filters: {
    substring(str) {
      var string = str.substring(str.length - 5);
      return string;
    },
    NoToChinese(num) {
      if (!/^\d*(\.\d*)?$/.test(num)) {
        alert("Number is wrong!");
        return "Number is wrong!";
      }
      var AA = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "日",
        "八",
        "九"
      );
      var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
      var a = ("" + num).replace(/(^0*)/g, "").split("."),
        k = 0,
        re = "";
      for (var i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
          case 0:
            re = BB[7] + re;
            break;
          case 4:
            if (
              !new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0])
            )
              re = BB[4] + re;
            break;
          case 8:
            re = BB[5] + re;
            BB[7] = BB[5];
            k = 0;
            break;
        }
        if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
          re = AA[0] + re;
        if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
        k++;
      }
      if (a.length > 1) {
        //加上小数部分(如果有小数部分)
        re += BB[6];
        for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
      }
      return re;
    },
  },
};
</script>
<style scoped>
.intr_page {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  background-color: #f4f8fc;
}

.intr_page .bgimg {
  width: 100%;
}

.cus_header {
  width: calc(100% - 2rem);
  height: 2.8125rem;
  padding: 0px 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.125rem;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2000;
  color: #fff;
}

.cus_header > div {
  width: 33.33%;
}

.cus_header .left img {
  display: block;
  width: 1.375rem;
  height: 1.1875rem;
  float: left;
}

.cus_header .center {
  text-align: center;
  font-weight: bold;
}

.cus_header .right {
  text-align: right;
}

.cus_header .right img {
  width: 1.4375rem;
  height: 1.375rem;
  object-fit: contain;
}

.doctor_info {
  width: 100%;
  height: 6.5625rem;
  position: absolute;
  top: 6.5625rem;
  font-size: 0.8125rem;
}

.doctor_info > div {
  margin: 0 1rem;
  width: calc(100% - 2rem);
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 7px 13px 0px rgba(145, 189, 255, 0.15);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  padding-top: 0.625rem;
}

.doctor_info img {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  position: absolute;
  top: -1.875rem;
  object-fit: cover;
}

.intr_info {
  width: calc(100% - 2rem);
  min-height: 5rem;
  padding: 0 1rem;
  padding-top: 5rem;
  background-color: #fff;
}

.intr_info .title {
  line-height: 2rem;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 0.5625rem;
}

.intr_info .title img {
  /* display: block; */
  width: 1.25rem;
  height: 1.1875rem;
  margin-right: 0.625rem;
  object-fit: contain;
}

.intr_info .msg {
  font-size: 0.875rem;
  color: #7f89a0;
  margin-bottom: 1.1875rem;
}

.btn {
  margin: 0 1rem;
  width: calc(100% - 2rem);
  height: 2.75rem;
  font-size: 1.125rem;
  text-align: center;
  line-height: 2.75rem;
  background: linear-gradient(90deg,
  rgba(68, 142, 255, 1) 0%,
  rgba(102, 163, 255, 1) 100%);
  border-radius: 0.1875rem;
  color: #fff;
  position: fixed;
  bottom: 1.25rem;
}

.appo_date {
  overflow-x: scroll;
  white-space: nowrap;
}

.appo_date .item {
  width: 3rem;
  height: 2.625rem;
  background-color: #fff;
  border-radius: 0.25rem;
  /* display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column; */
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.25rem;
  display: inline-block;
  text-align: center;
  padding: 0.6875rem 0;
}

.noclick {
  color: #9ca6b9;
}

.active {
  background-color: rgba(90, 173, 251, 1) !important;
  color: #fff;
}

.time_active {
  background-color: #448eff !important;
  color: #fff;
}

.gap {
  width: 100%;
  height: 10px;
  background: #f4f8fc;
}

.time_head {
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.time_head_1 {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #3F4551;
  line-height: 20px;
}

.time_head_2 {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #F72D23;
  line-height: 20px;
}

.time_box {
  display: flex;
  /* justify-content: space-between; */
  flex-flow: row wrap;
  padding: 0.625rem 0.875rem;

}

.time_box > div {
  /* width: 167px;
  margin-top: 20px; */
}

.time_box_item {
  width: calc((100% - 0.75rem) / 4);
  height: 2.75rem;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(172, 205, 255, 0.24);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* flex-flow: column; */


  margin-bottom: 0.625rem;
  margin-right: 0.1rem;
}

.time_box_item .num {
  color: red;
  font-size: 15px;
}

.time_box_item .fee {
  font-size: 14px;
}


.mask_confirm {
  width: 90%;
  background-color: #fff;
  height: 30%;
  margin: 0 auto;
  border-radius: 0.31rem;
  position: fixed;
  left: 5%;
  top: 30%;
  /* position: relative; */
}

.mask_confirm .tit {
  height: 2.81rem;
  line-height: 2.81rem;
  text-align: center;
  border-bottom: 0.06rem solid #e7ecf5;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #448eff;
}

.mask_confirm .content {
  padding: 0.00rem 1.00rem;
  margin: 1.25rem 0;
  height: 66%;
  overflow-y: auto;
  line-height: 1.5rem;
}

.mask_confirm .btn {
  position: absolute;
  bottom: 0.94rem;
  left: calc((100% - 10.13rem) / 2);
  width: 8.13rem;
  height: 2.75rem;
  text-align: center;
  line-height: 2.75rem;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 0.19rem;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

</style>
